<template>
  <view class="container" v-show="showPage">
    <view class="submit_main" :style="{ paddingBottom: isPay ? '20px' : '140px' }">
      <view class="info">
        <image class="info_left" :src="info.coverImage" mode="scaleToFill" />
        <view class="info_right">
          <view class="title">{{ info.goodsName }}</view>
          <view class="date">{{ info.createTime + " 至 " + info.endTime }}</view>
          <view class="price_info">
            <text class="price">¥ {{ userInfo.userRole == 0 ? info.price : info.fighterPrice }}</text>
            <view class="step_main" v-if="!isPay">
              <image
                src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/icon_decreace.png"
                mode="scaleToFill"
                @click="setNum(-1)"
              />
              <view class="num">{{ order.amount }}位</view>
              <!-- <image
                                src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/icon_plus.png"
                                mode="scaleToFill"
                            /> -->
              <view class="btn_plus" @click="setNum(1)">+</view>
            </view>
            <view v-else style="text-align: right; flex: 1">x{{ order.amount }}人</view>
          </view>
        </view>
      </view>
      <view class="shifu_box" v-if="isPay">
        <text class="left">实付：</text>
        <text class="right">￥{{ payNum }}</text>
      </view>
      <view class="addr" v-if="!isPay">
        <text>地址：</text>
        <text>{{ info.addressInfo }}</text>
      </view>
      <view class="contact" v-if="!isPay">
        <view class="contact_item" v-for="index of order.amount" :key="index">
          <view class="index">第{{ index + 1 }}位</view>
          <view class="input_main">
            <view class="label">姓名：</view>
            <view class="input">
              <input type="text" v-model="order.registerList[index].name" placeholder="请输入姓名" />
            </view>
          </view>
          <view class="input_main">
            <view class="label">联系方式：</view>
            <view class="input">
              <input type="text" v-model="order.registerList[index].mobile" placeholder="请输入联系方式" />
            </view>
          </view>
          <view class="input_main">
            <view class="label">机构名称：</view>
            <view class="input">
              <input type="text" v-model="order.registerList[index].addressInfo" placeholder="请输入机构名称" />
            </view>
          </view>
        </view>
      </view>
      <view class="contact" style="margin-top: 16px">
        <view class="contact_item">
          <view class="index">师训地址</view>
          <view class="label" style="margin-top: 20px">{{ info.studyAddress }}</view>
          <view class="label" style="margin-top: 20px">{{ info.studyContacts }}， {{ info.studyMobile }}</view>
        </view>
      </view>
    </view>
    <view class="submit_main" v-if="isPay" :style="{ marginTop: '20px' }">
      <view class="contact" style="margin-top: 0">
        <view class="contact_item" v-for="(t, idx) in order.registerList" :key="idx">
          <view class="index">学员{{ idx + 1 }}信息</view>
          <view class="label" style="margin-top: 20px">{{ t.name }}， {{ t.mobile }}</view>
          <view class="label" style="margin-top: 20px">{{ t.addressInfo }}</view>
        </view>
      </view>
    </view>
    <view class="bottom">
      <view class="amount_box" v-if="!isPay">
        <text class="text">应付金额：</text>
        <text class="amount">¥ {{ payNum }}</text>
      </view>
      <view class="btn_submit" v-if="!isPay" @click="toSubmit">立即支付</view>
      <view class="btn_submit green" v-if="isPay">待学习</view>
    </view>
  </view>
</template>

<script>
import indexApi from "@/api/yanxue/indexPage";
import { orderBuy, getOrderInfo } from "@/api/yanxue/order";
import { wxPayment } from "@/core/app";
export default {
  data() {
    return {
      info: {
        // title: "【色语】色彩师训第一期",
        // date: "2024/05/27-05/30",
        // price: "998",
        // num: 2,
        // addr: "画霸美院（荣美术馆校区）",
      },
      order: {
        amount: 1,
        goodsId: "",
        orderType: 2,
        registerList: [
          {
            name: "",
            mobile: "",
            addressInfo: "",
          },
        ],
      },
      userInfo: {},
      isPay: false, // 是否支付
      payNum: "",
      orderId: "",
      showPage: false,
      ifExpediting: false,
    };
  },
  methods: {
    onLoad(options) {
      this.userInfo = this.$store.state.user.userInfo;
      if (options.id) {
        this.order.goodsId = options.id;
        this.getInfo(options.id);
      }
      if (options.detailId) {
        uni.setNavigationBarTitle({
          title: "查看师训订单",
        });
        this.orderId = options.detailId;
        this.orderInfo(options.detailId);
      }
    },
    orderInfo(id) {
      getOrderInfo({ id }).then((res) => {
        this.isPay = true;
        this.showPage = true;
        this.order.registerList = res.result.memberList.map((x) => {
          return {
            name: x.name,
            mobile: x.mobile,
            addressInfo: x.storeName,
          };
        });
        res.result.goodsInfo.createTime = res.result.goodsInfo.createTime.split(" ")[0];
        res.result.goodsInfo.endTime = res.result.goodsInfo.endTime.split(" ")[0];
        this.info = res.result.goodsInfo;
        this.order.amount = res.result.totalAmount;
        this.payNum = res.result.totalPrice;
      });
    },
    toSubmit() {
      const app = this;
      let dAs = this.order.registerList;
      if (dAs.some((x) => x.name == "")) return uni.showToast({ title: "请输入姓名", icon: "none" });
      if (dAs.some((x) => x.mobile == "")) return uni.showToast({ title: "请填写手机号", icon: "none" });
      if (dAs.some((x) => x.addressInfo == "")) return uni.showToast({ title: "请输入收货地址", icon: "none" });
      orderBuy(this.order).then((res) => {
        wxPayment(res.result.data)
          .then(() => {
            this.orderId = res.result.data.orderId;
            uni.showToast({
              title: "支付成功",
              icon: "none",
              duration: 1500,
            });
            this.isPay = true;
          })
          .catch((err) => app.$error("订单未支付"))
          .finally(() => {});
      });
    },
    setNum(num) {
      if (this.order.amount == 1 && num == -1) return;
      this.order.amount = this.order.amount + num;
      if (num == -1) {
        this.order.registerList = this.order.registerList.slice(0, this.order.amount);
      } else {
        this.order.registerList.push({
          name: "",
          mobile: "",
          addressInfo: "",
        });
      }
      this.payNum = (this.userInfo.userRole == 0 ? this.info.price : this.info.fighterPrice) * this.order.amount;
    },
    getInfo(id) {
      indexApi.getGoodsInfo({ id }).then((res) => {
        this.showPage = true;
        res.result.createTime = res.result.createTime.split(" ")[0];
        res.result.endTime = res.result.endTime.split(" ")[0];
        this.info = res.result;
        this.payNum = (this.userInfo.userRole == 0 ? this.info.price : this.info.fighterPrice) * this.order.amount;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 679px;
  background: linear-gradient(180deg, #c1f26d 0%, #ffffff 100%);
  padding-top: 20px;
}
.submit_main {
  width: 351px;
  margin: 0 auto;
  padding: 29px 23px 140px 23px;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 10px;
  .info {
    display: flex;
    align-items: center;
    .info_left {
      width: 100px;
      height: 100px !important;
      margin-right: 13px;
    }
    .info_right {
      .title {
        font-size: 16px;
        color: #333333;
        font-weight: bold;
      }
      .date {
        font-family: HarmonyOS Sans SC;
        font-weight: 500;
        font-size: 14px;
        color: #000000;
        margin-top: 20px;
      }
      .price_info {
        display: flex;
        align-items: center;
        margin-top: 10px;
        .price {
          font-family: HarmonyOS Sans SC;
          font-weight: bold;
          font-size: 21px;
          color: #000000;
        }
        .step_main {
          display: flex;
          align-items: center;
          margin-left: 20px;
          width: 104px;
          height: 23px;
          background: #efefef;
          border-radius: 12px;
          justify-content: space-between;
          padding: 0 12px;
          image {
            width: 14px;
            height: 14px !important;
          }
          .btn_plus {
            font-size: 14px;
            color: #fff;
            width: 14px;
            height: 14px;
            border-radius: 14px;
            background-color: #f4420a;
            text-align: center;
            line-height: 11px;
          }
          .num {
            font-family: HarmonyOS Sans SC;
            font-weight: 400;
            font-size: 12px;
            color: #000000;
          }
        }
      }
    }
  }
  .shifu_box {
    text-align: right;
    margin-top: 30rpx;
    .left {
      font-family: HarmonyOS Sans SC;
      font-weight: 500;
      font-size: 14px;
      color: #000000;
    }
    .right {
      font-family: HarmonyOS Sans SC;
      font-weight: 500;
      font-size: 24px;
      color: #f4420a;
    }
  }
  .addr {
    font-family: HarmonyOS Sans SC;
    font-weight: 500;
    font-size: 14px;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 25px;
  }
  .contact {
    margin-top: 25px;
    .contact_item {
      margin-bottom: 20px;
      .index {
        font-family: HarmonyOS Sans SC;
        font-weight: 500;
        font-size: 14px;
        color: #000000;
        display: flex;
        align-items: center;
      }
      .index::before {
        content: "";
        display: inline-block;
        width: 4px;
        height: 19px;
        background: #a2ff00;
        border: 1px solid #a2ff00;
        margin-right: 3px;
      }
      .input_main {
        margin-top: 14px;
        .label {
          font-family: HarmonyOS Sans SC;
          font-weight: 400;
          font-size: 13px;
          color: #000000;
        }
        .input {
          flex: 1;
          margin-top: 15px;
          width: 302px;
          height: 42px;
          background: #e8e8e8;
          border-radius: 21px;
          input {
            height: 42px;
            border-radius: 5px;
            padding: 0 25px;
          }
        }
      }
    }
  }
}
.bottom {
  position: fixed;
  z-index: 9;
  bottom: 0;
  width: 100%;
  background: #ffffff;
  padding: 19px 27px;
  box-sizing: border-box;
  .amount_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 9px;
    .amount {
      font-family: HarmonyOS Sans SC;
      font-weight: 500;
      font-size: 30px;
      color: #f4420a;
    }
    .text {
      font-family: HarmonyOS Sans SC;
      font-weight: bold;
      font-size: 16px;
      color: #000000;
    }
  }
  .btn_submit {
    font-family: HarmonyOS Sans SC;
    font-weight: bold;
    font-size: 15px;
    color: #ffffff;
    text-align: center;
    line-height: 42px;
    margin-top: 14px;
    width: 322px;
    height: 42px;
    background: #f95513;
    border-radius: 21px;
  }
  .green {
    background: #a2ff00;
  }
}
</style>
